<template>
  <div>
    <a-modal title="上传资料" :visible="visible" @before-open="open" @before-ok="handleOk" @cancel="handleCancel" :align-center="false" title-align="start" width="600px" :mask-closable="false">
      <div>
        <a-form auto-label-width ref="formRef" size="medium" :model="form" :rules="rules">
          <a-row>
            <a-col :span="12">
              <a-form-item field="dataType" label="资料类型">
                <a-select v-model="form.dataType" allow-clear placeholder="请选择" allow-search :fallback-option="() => ''">
                  <a-option value="手绘稿" label="手绘稿"></a-option>
                  <a-option value="原图" label="原图"></a-option>
                  <a-option value="CAD" label="CAD"></a-option>
                  <a-option value="PSD" label="PSD"></a-option>
                  <a-option value="其他" label="其他"></a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="附件">
                <a-space>
                  <a-upload style="width: 120px" action="/" :on-before-upload="beforeUplaod">
                    <template #upload-button>
                      <div class="custom-uplaod-btn">
                        <icon-plus />
                      </div>
                    </template>
                  </a-upload>

                  <div class="file-list-con" v-if="fileItemObj.url">
                    <div class="top">
                      <div class="del-icon cursor" @click="fileItemObj = {}">
                        <icon-close-circle />
                      </div>
                      <img width="100" height="100" v-if="fileItemObj.fileType != 'img'" :src="typMap[fileItemObj.fileType]" alt="" />
                      <a-image style="width: 100px; height: 100px" v-else :src="fileItemObj.url" alt="" />
                    </div>
                    <div class="name">{{ fileItemObj.name }}</div>
                  </div>
                </a-space>
              </a-form-item>
              <a-form-item label="预览图">
                <a-space>
                  <a-upload style="width: 120px" action="/" :on-before-upload="beforeUplaodProviewImg">
                    <template #upload-button>
                      <div class="custom-uplaod-btn">
                        <icon-plus />
                      </div>
                    </template>
                  </a-upload>
                  <div class="file-list-con" v-if="previewUrl">
                    <div class="top">
                      <div class="del-icon cursor" @click="previewUrl = ''">
                        <icon-close-circle />
                      </div>
                      <a-image style="width: 100px; height: 100px" :src="previewUrl" alt="" />
                    </div>
                  </div>
                </a-space>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <template #footer>
        <a-button class="gray-outline" @click="handleCancel">取消</a-button>
        <a-button type="primary" :loading="loading" @click="handleOk">确定</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { uploadFile } from '@/api/base'
  import { Message } from '@arco-design/web-vue'
  import world from '@/assets/word.png'
  import excel from '@/assets/excel-.png'
  import pdf from '@/assets/pdf1.png'
  import cad from '@/assets/CAD.png'
  import psd from '@/assets/psd.png'
  import sub from '@/assets/yuanwenjian-1.png'
  export default defineComponent({
    props: [''],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const formRef = ref()
      const data: any = reactive({
        form: {},
        rules: {
          dataType: [{ required: true, message: '请选择上传资料类型' }],
        },
        loading: false,
        fileList: [],
        typMap: {
          world: world,
          excel: excel,
          pdf: pdf,
          cad: cad,
          psd: psd,
          sub: sub,
        },
        fileItemObj: {},
        previewUrl: '',
      })

      const open = () => {}
      const handleOk = () => {
        formRef.value.validate(async (valid: any) => {
          if (!valid) {
            if (!data.fileItemObj.url) {
              return Message.error('请上传附件')
            }
            // emit('save', data.fileItemObj)
            emit('save', { ...data.fileItemObj, previewUrl: data.previewUrl, type: data.form.dataType })
            handleCancel()
          }
        })
      }

      const beforeUplaodProviewImg = async (file: File) => {
        let type = file.type.split('/')[1]
        let typeName = file.name.split('.')[1]
        let formData = new FormData()
        formData.append('file', file)
        const res: any = await uploadFile(formData)
        data.previewUrl = res?.data?.publicUrl
      }

      const beforeUplaod = async (file: any) => {
        let type = file.type.split('/')[1]
        let typeName = file.name.split('.')[1]
        console.log(file)

        let formData = new FormData()
        formData.append('file', file)
        const res: any = await uploadFile(formData)
        let url = res?.data?.publicUrl
        let userInfo: any = localStorage.getItem('user-info')
        console.log(JSON.parse(userInfo))

        let obj: any = {
          type: data.form.dataType,
          url: url,
          name: file.name,
          createUname: JSON.parse(userInfo).userName,
          gmtCreate: new Date(),
        }
        switch (typeName) {
          case 'docx':
          case 'doc':
          case 'rtf':
            obj.fileType = 'world'
            break
          case 'xlsx':
          case 'xls':
          case 'csv':
            obj.fileType = 'excel'
            break
          case 'pdf':
            obj.fileType = 'pdf'
            break
          case 'dwg':
          case 'dxf':
          case 'dwt':
          case 'dwf':
          case 'ifc':
            obj.fileType = 'cad'
            break
          case 'psd':
            obj.fileType = 'psd'
            break
          case 'jpg':
          case 'jpeg':
          case 'png':
            obj.fileType = 'img'
            break
          default:
            obj.fileType = 'sub'
            break
        }
        console.log(obj)

        data.fileItemObj = obj
      }

      const handleCancel = () => {
        data.form = {}
        data.fileList = []
        data.fileItemObj = {}
        visible.value = false
      }
      return {
        ...(toRefs(data) as any),
        visible,
        formRef,
        open,
        handleOk,
        handleCancel,
        beforeUplaod,
        beforeUplaodProviewImg,
      }
    },
  })
</script>

<style lang="less" scoped>
  .custom-uplaod-btn {
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
    background: var(--color-fill-2);
    border: 1px dashed var(--color-neutral-3);
    border-radius: var(--border-radius-small);
  }

  .file-list-con {
    .top {
      text-align: center;
      line-height: 100px;
      position: relative;
      width: 120px;
      height: 100px;
      span {
        font-size: 50px;
      }

      .del-icon {
        position: absolute;
        top: -46px;
        right: 0;
        z-index: 1;
        font-size: 20px;
      }
    }
    .name {
      height: 20px;
      line-height: 20px;
      text-align: center;
      font-size: 10px;
    }
  }
</style>
